import cn from 'classnames';
import Image from 'next/image';

import Apple from '../../images/articles1.png';
import companyNameEating from '../../images/articles2.png';
import companyName from '../../images/articles3.png';
import { ColouredInfoBlock } from '../ColouredInfoBlock';
import cs from './Articles.module.scss';

export const Articles = () => (
  <ColouredInfoBlock className={cs.block} reverseResponsive>
    <h2 className="h2">Статьи</h2>
    <p className={cn('p-reversed', cs.descr)}>
      Читайте интересные статьи по&nbsp;кормлению и&nbsp;уходу за&nbsp;ребенком
    </p>
    <div className={cs.flex}>
      <div className={cs.item}>
        <div className={cs.img}>
          <Image alt="Питание" height={70} src={Apple} width={70} />
        </div>
        <span className={cs.text}>Питание</span>
      </div>
      <div className={cs.item}>
        <div className={cs.img}>
          <Image alt="Аллергия" height={70} src={companyNameEating} width={70} />
        </div>
        <span className={cs.text}>Аллергия</span>
      </div>
      <div className={cs.item}>
        <div className={cs.img}>
          <Image alt="Развитие" height={70} src={companyName} width={70} />
        </div>
        <span className={cs.text}>Развитие</span>
      </div>
    </div>
  </ColouredInfoBlock>
);
